<template>
  <div class="ec-show-loading-con" :class="{ mask, black, isFull }" v-if="isShow">
    <div class="ec-loading-content">
      <div class="ec-loading"></div>
      <div class="ec-loading-title" v-if="title">{{title}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ec-loading',
    data () {
      return {
        currentRoutePath: '',
        mask: false,
        black: true,
        title: '',
        isShow: false,
        isFull: false
      }
    },
    methods: {
      show ({ title = '', mask = false, black = true, isFull = false } = {}) {
        this.isFull = isFull
        this.title = title
        this.mask = mask
        this.black = black
        this.isShow = true
      },
      hide () {
        this.isShow = false
      }
    }
  }
</script>
<style lang="scss" scoped>
  @keyframes loading {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  .ec-show-loading-con {
    position: fixed;
    top: 45%;
    left: 50%;
    z-index: 99999999999;
    width: 130px;
    height: 130px;
    transform: translate(-50%, -50%);

    .ec-loading-content {
      position: absolute;
      top: 50%;
      left: 50%;
      padding: 21px;
      color: #666;
      font-size: 16px;
      text-align: center;
      /*background: rgba(255, 255, 255, 1);*/
      border-radius: 9px;

      /* box-shadow: 0 0 40px rgba(0, 0, 0, 0.04); */
      transform: translate(-50%, -50%);

      .ec-loading {
        width: 28px;
        height: 28px;
        margin-right: auto;
        margin-left: auto;
        border: 3px solid $primary-color;
        border-left: 3px solid transparent;
        border-radius: 10000px;
        animation: loading 1s linear infinite;
      }

      .ec-loading-title {
        width: 100%;
        min-width: 70px;
        max-width: 180px;
        padding-top: 11px;
        overflow: hidden;
        line-height: 1.4;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }

  .mask, .isFull {
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.2);
    transform: translate(0, 0);
  }

  .isFull {
    background: #fff;
  }

  .black {
    .ec-loading-content {
      color: #222;

      /* background: rgba(0, 0, 0, 0.7); */

      .ec-loading {
        border: 3px solid $primary-color;
        border-left: 3px solid transparent;
      }
    }
  }
</style>
